<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>制作简单动画效果</title> 
<script src="jquery-2.1.1.js"></script>

<style type="text/css">
	#book1{
		width: 100px;
		height: 150px;
		position: relative;
		background: red;
		left: 5px;
	}
</style>

<script type="text/javascript"> 
 	
$(function() {
	//.animate( properties [, duration ] [, easing ] [, complete ] )
	$('#clickme').click(function() {
		$('#book1').animate({
			left   :'100',
			width  :'150',
			height :'200px'
		},2000,'linear',function(){
			$('body').append('<div>动画执行完毕</div>')
		});
	});
})
</script>
</head> 
<body> 

<div id="clickme">点击我</div>
<img id="book1" />
<img id="book2" />


</body> 
</html> 
